<template>
  <div>
    <headerNav title="编辑资料"></headerNav>
    <div class="avatarWrapper">
      <!-- 头像组件 -->
      <van-uploader :after-read="afterRead">
        <img
          v-if="userInfo.head_img"
          class="avatar"
          :src="$axios.defaults.baseURL+userInfo.head_img"
          alt
        />
        <img v-else class="avatar" src="../assets/01.jpg" alt />
      </van-uploader>
    </div>
    <personalBar labelText="昵称" :descText="userInfo.nickname" @handleClick="isShowNickname=true"></personalBar>
    <personalBar labelText="密码" descText="*****" @handleClick="isShowPassword=true"></personalBar>
    <personalBar
      labelText="性别"
      :descText="userInfo.gender==1?'小哥哥':'小姐姐'"
      @handleClick="isShowGender=true"
    ></personalBar>
    <!-- 弹出窗 -->
    <!-- 修改昵称框 -->
    <van-dialog v-model="isShowNickname" title="修改昵称" show-cancel-button @confirm="setNickName">
      <!-- 输入框 -->
      <van-field v-model="newNickname" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改密码框 -->
    <van-dialog v-model="isShowPassword" title="修改密码" show-cancel-button @confirm="setPassword">
      <!-- 输入框 -->
      <van-field v-model="newPassword" placeholder="请输入新密码" type="password" />
    </van-dialog>
    <!-- 性别上拉窗 -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="setGender"
      cancel-text="取消"
    ></van-action-sheet>
  </div>
</template>

<script>
import HeaderNav from "../components/headerNav";
import personalBar from "../components/personalBar";

export default {
  data() {
    return {
      userInfo: {},
      isShowNickname: false,
      isShowPassword: false,
      newNickname: "",
      newPassword: "",
      isShowGender: false,
      genderList: [
        {
          name: "小哥哥",
          gender: 1,
        },
        {
          name: "小姐姐",
          gender: 0,
        },
      ],
    };
  },
  components: {
    HeaderNav,
    personalBar,
  },
  // 刷新页面获取数据渲染
  created() {
    // 调用封装刷新页面
    this.loadPage();
  },
  methods: {
    // 封装刷新页面
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        // 验证token
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token"),
        // },
      }).then((res) => {
        // console.log(res.data);
        this.userInfo = res.data.data;
      });
    },
    // 新的昵称发送事件
    setNickName() {
      this.editProfile({
        nickname: this.newNickname,
      });
      this.newNickname = "";
    },
    // 新的密码发送事件
    setPassword() {
      this.editProfile({
        password: this.newPassword,
      });
      this.newPassword = "";
    },
    // 封装昵称和密码
    editProfile(newData) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        // 验证token
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token"),
        // },
        data: newData,
      }).then((res) => {
        // console.log(res);
        this.loadPage();
      });
    },
    // 性别事件
    setGender(item) {
      console.log(item);
      this.editProfile({
        gender: item.gender,
      });
      this.isShowGender = false;
    },
    // 头像事件
    afterRead(fileObj) {
      // console.log(fileObj.file);
      // 1.先上传图片,获取到图片的网络地址
      // 这个上传组件选择完图片触发回调
      // 形参接受一个文件数据对象,上传的文件就在fileObj.file里面
      // 创建FormData对象,将图片文件按照api要求的字段插入
      const picture = new FormData();
      picture.append("file", fileObj.file);
      this.$axios({
        method: "post",
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token"),
        // },
        url: "/upload",
        data: picture,
      }).then((res) => {
        // console.log(res.data.data.url);
        this.editProfile({
          head_img: res.data.data.url,
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.avatarWrapper {
  height: 138/360 * 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  .avatar {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    object-fit: cover;
    border-radius: 50%;
  }
}
.xingbie {
  align-items: center;
  justify-content: center;
}
</style>